<!-- <script setup lang="ts">
import { FitAddon } from '@xterm/addon-fit';
import { Terminal } from '@xterm/xterm';
import { onMounted, onUnmounted, ref, watch, type Ref } from 'vue';

const content = defineModel() as Ref<string>
const terminal = ref({} as Terminal);
const terminalContainer = ref<HTMLElement | null>(null);
const fitAddon = ref({} as FitAddon);

onMounted(() => {
    initTerm();
})

onUnmounted(() => {
    window.removeEventListener('resize', () => {
        fitAddon.value.fit();
    });
})

watch(content, () => {
    terminal.value.write(content.value);
})

const initTerm = () => {
    terminal.value = new Terminal({
        
        theme: {
            foreground: '#D4D4D4', // 文本颜色
            background: 'black', // 背景颜色
            cursor: '#569CD6', // 光标颜色
            black: '#000000',
            red: '#D16969',
            green: '#608B4E',
            yellow: '#DCDCAA',
            blue: '#569CD6',
            magenta: '#C586C0',
            cyan: '#29A6C7',
            white: '#D4D4D4',
            brightBlack: 'rgba(255, 255, 255, 0.2)',
            brightRed: '#D16969',
            brightGreen: '#608B4E',
            brightYellow: '#DCDCAA',
            brightBlue: '#569CD6',
            brightMagenta: '#C586C0',
            brightCyan: '#29A6C7',
            brightWhite: '#D4D4D4',
        }
    })
    fitAddon.value = new FitAddon();
    terminal.value.loadAddon(fitAddon.value);
    // terminal.value.onData((input)=>{
    //     // 处理特殊按键（如回车键）
    //     if (input === '\r') { // 回车键
    //         terminal.value.write('\r'); // 换行并显示新的提示符
    //         send(term.value.input);
    //         term.value.input = '';
    //     } else if (input === '\x7F') { // 退格键
    //         term.value.input = term.value.input.slice(0,-1);
    //         terminal.value.write('\b \b'); // 删除一个字符
    //     } else {
    //         terminal.value.write(input); // 显示用户输入
    //         term.value.input = term.value.input + input;
    //     }
    // })
    if (terminalContainer.value) {
        terminal.value.open(terminalContainer.value);
    }
    // 监听窗口大小变化，调整终端大小
    window.addEventListener('resize', () => {
        fitAddon.value.fit();
    });
}
</script>

<template>
    <div ref="terminalContainer" class="terminal-container"></div>
</template>

<style lang="scss" scoped>
.terminal-container {
    display: flex;
    height: 100vh;
    width: 100%;
}
</style> -->